<template>
	<view v-show="i === index">
		<down-bar :params="params" @search="search"></down-bar>
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<!-- @init="mescrollInit" -->
		<mescroll-body :ref="'mescrollRef'+i" 
			 :down="downOption" 
			@down="downCallback" :up="upOption" @up="upCallback" 
			>
			<!-- 数据列表 -->
			<question-item v-for="(item, index) in list" :key="index" :item="item">
			</question-item>
		</mescroll-body>
	</view>
</template>

<script>
	import downBar from './down-bar.vue'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	
	import api from '@/api/question.js'
	import questionItem from '@/components/common/question-item.vue'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		
		components: {downBar, questionItem},
		props: {
			params: {
				type:Object,
				default: null
			},
			content: {
				type: String,
				default: ''
			},
			
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
		},
		
		data() {
			return {
				upOption:{
					auto:false,
					noMoreSize: 4,
				},
				searchData: {
					content: null,
					sort: null, //排序类型（new 最新，hot热门）
					labelId: null, //标签id
					categoryId: null // 分类id
				},
				
				list: []
			}
		},
		
		
		mounted() {
			// Object.keys 返回对象中所有的key名称，返回值数组
			this.params && Object.keys(this.searchData).forEach((key)=>{
				// 防止参数值为0也是有效的，所以要将0也正常处理，因为默认0会被false
				this.searchData[key] = 
					( this.params[key] || this.params[key] === 0 ) ? this.params[key] : null
			})
			// console.log('问答mounted合并的searchData', this.searchData)
		},
		
		methods: {
			search(data) {
				// 查询逻辑
				this.searchData.content = this.content && this.content.trim()
				Object.assign(this.searchData, data)
				
				console.log('最终合并的查询条件', this.searchData)
				
				this.mescroll.resetUpScroll()
			},
			
			// 上拉加载的回调（下拉也会调用此方法，page.num = 1)
			async upCallback(page) {
				// console.log('文章列表upCallback', page.num, page.size, this.searchData)
				const {data} = await api.getList(this.searchData, page.num, page.size)
				const currList = data.records
				
				// 第一次加载数据（下拉刷新）
				if(page.num === 1) {
					this.list = []
					// 回到顶部(距离顶部位置，时长毫秒数)
					this.mescroll.scrollTo(0, 0)
				}
				
				this.list = this.list.concat(currList)
				this.mescroll.endBySize(currList.length, data.total)
			}
		}
	}
</script>
<style>
</style>
